.image {
  cursor: pointer;

  width: 100%;
  height: 100%;

  object-fit: cover;
  border: 1px solid transparent;
  border-radius: inherit;
}

.avatarFallback {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  padding: 4px;

  font-size: var(--font-size-m);

  object-fit: cover;
  background-color: var(--color-dark-700);
  border: 1px solid var(--color-light-100);
  border-radius: 50%;
}

.avatarRoot {
  cursor: pointer;

  display: inline-flex;

  width: 36px;
  height: 36px;

  border-radius: 100%;

  transition: 0.3s;

  &:hover {
    filter: drop-shadow(0 0 6px var(--color-accent-100));
  }
}
